<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <div class="header">
        <el-image :src="logoUrl" class="header-image"></el-image>
        <div class="header-text">大模型驱动的《数据库》课程教学系统</div>
      </div>
      <!-- 主体 -->
      <el-main>
        <!-- 右侧登录容器 -->
        <div class="form">
          <h2>Login</h2>
          <!-- 表单 -->
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRule" label-width="0px" class="login_form">
            <!--  手机号或用户名  -->
            <el-form-item prop="tel">
              <el-input placeholder="请输入用户名" v-model="loginForm.id" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" v-model="loginForm.password" prefix-icon="el-icon-lock" show-password>
              </el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item class="bst">
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
      <!-- 页脚 -->
      <el-footer>
        <div class="footer">
          <p class="footer_type">
            <span>平台论坛</span><span>|</span><span>联系我们</span><span>|</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
              <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
            </svg>
            <span>abc@example.com</span><span>|</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
            </svg>
            <span>400+1234567</span>
          </p>
          <p class="footer_type">
            <span>大模型驱动的《深度学习》课程教学系统</span><span>|</span>
            <span>沪ICP备19023456号-1</span><span>|</span>
            <span>沪公网安备31010102098765号</span>
          </p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import SessionManager from '../utils/sessionManager.js'

export default {
  data () {
    return {
      // 登录表单的数据绑定对象
      loginForm: {
        id: '',
        password: ''
      },
      // 验证表单规则
      loginFormRule: {
        id: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 30, message: '长度在 6字符以上，30字符以内', trigger: 'blur' }
        ]
      },
      logoUrl: require('../static/img/welcome-header.png')
    }
  },
  methods: {
    login () {
      this.$refs.loginFormRef.validate(async valid => {
        if (valid) {
          // 通过id查找
          this.$http.get('/user/query', {
            params: { id: this.loginForm.id }
          }).then(({ data: result }) => {
            // console.log(result)
            if (result.code === 200 && result.data !== null) {
              // 通过账号密码查找
              this.$http.post('/user/find', this.loginForm).then(({ data: res }) => {
                if (res.code === 200 && res.data !== null) {
                  // 特殊处理250000001管理员
                  if (res.data.id === '250000001') {
                    // 确保管理员角色为0
                    res.data.role = 0
                    // console.log('管理员登录：', res.data)
                  } else {
                    // 确保角色值是数字类型
                    res.data.role = parseInt(res.data.role)
                  }
                  
                  // 确保用户数据正确性
                  const userData = {
                    id: res.data.id,
                    password: res.data.password,
                    role: res.data.role
                  };
                  
                  // console.log('存储用户信息:', userData);
                  
                  // 使用会话管理器存储用户信息
                  this.$sessionManager.setUserInfo(userData);
                  
                  // 为了向后兼容，同时使用sessionStorage直接存储，使用统一的键名
                  window.sessionStorage.setItem('userID', userData.id);
                  window.sessionStorage.setItem('userId', userData.id); // 同时存储小写版本 
                  window.sessionStorage.setItem('userPassword', userData.password);
                  window.sessionStorage.setItem('userRole', userData.role);
                  
                  // 调试日志
                  // console.log('登录成功，存储的信息:');
                  // this.$sessionManager.debug();
                  
                  this.$message.success('登录成功')
                  this.$router.push('/manage/' + this.loginForm.id + '/video/list')
                  this.loginForm = {
                    id: '',
                    password: ''
                  }
                } else {
                  this.$message.error('密码错误，请重新输入')
                  this.loginForm = {
                    id: '',
                    password: ''
                  }
                }
              })
            } else {
              this.$message.error('用户名不存在')
              this.loginForm = {
                id: '',
                password: ''
              }
            }
          })
        }
      })
    },
    handleRegister () {
      // 注册处理逻辑
      console.log('Redirect to register page')
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 左对齐 */
  color: #333;
  height: 15vh;
  padding-left: 20px;
}

.header-image {
  width: 50px;
  height: auto;
  margin-right: 15px;
}

.header-text {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  flex-grow: 1;
}
.el-main {
  display: flex;
  justify-content: flex-end;
  align-items: center; /* 垂直居中 */
  height: 90vh; /* 主体部分占视口高度的90% */
  background: url("../static/img/img.png") no-repeat center center; /* 背景居中 */
  background-size: 100% 100%;
}
.form {
  width: 300px;
  height: 70%;
  background-color: #2a6dc4; /* 登录容器的背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  transition: 0.5s;
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 10px; /* 圆角效果 */
  padding: 20px;
  margin: 30px;
}
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  padding: 20px 0;
}

.footer {
  background: #B3C0D1;
  margin-top: 10px;
  padding-bottom: 10px;
}

.footer_type {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  font-family: '黑体', sans-serif;
  color: white;
  word-spacing: 10px;
  margin: 10px 0;
}

.footer_type span {
  padding-right: 10px;
}

.footer_type svg {
  vertical-align: middle;
}

@media (max-width: 768px) {
  .footer_type {
    font-size: 14px;
    flex-direction: column;
    align-items: center;
  }

  .footer_type span {
    margin-bottom: 5px;
  }
}
.textButton {
  text-align: center; /* 使文本居中 */
  margin-top: 10px;
}

.bst {
  display: flex;
  justify-content: center;
}
</style>
